<script setup lang="ts">
import  {computed, reactive, ref, watch} from "vue";
import {userBindAccountApi, type userBindAccountType} from "@/api/user_api";

import {Message} from "@arco-design/web-vue";
import type {userAccountBindType} from "@/api/user_api";
import F_captcha from "@/components/common/f_captcha.vue";
interface Props {
  visible: boolean
  bindType: userAccountBindType
}

const props = defineProps<Props>()
const emits = defineEmits<{
  (event: "update:visible", value: boolean): void;
  (event: "success"): void;
}>();

const form = reactive<userBindAccountType>({
  value: "",
  bindType: props.bindType,
  step: 1,
})

const captchaRef = ref()
async function beforeOpen() {
  captchaRef.value.getCaptcha()
}



const formBindRef = ref()

async function bindHandler(step: 1 | 2) {
  // 去给账号发验证码
  const val = await formBindRef.value.validate()
  if (val) {
    return
  }
  const res = await userBindAccountApi(form)
  if (res.code) {
    Message.error(res.msg)
    if (step === 1) {
      captchaRef.value.getCaptcha()
    }
    return
  }
  Message.success(res.msg)
  if (step === 1) {
    form.step = 2
  }
  if (step === 2) {
    emits("update:visible", false)
    emits("success");
  }
}

function cancel() {
  form.captcha = ""
  form.code = ""
  form.value = ""
  emits("update:visible", false)
  form.step = 1
}

const accountLabel = computed(() => {
  if (form.bindType === 1) {
    return "邮箱"
  }
  return "手机号"
})
const accountCodeLabel = computed(() => {
  if (form.bindType === 1) {
    return "邮箱验证码"
  }
  return "短信验证码"
})

watch(() => props.bindType, () => {
  form.bindType = props.bindType
})

</script>

<template>
  <a-modal body-class="bindAccountModalBody" @cancel="cancel" :title="'绑定' + accountLabel" :visible="visible"
           @before-open="beforeOpen">
    <a-steps v-model:current="form.step">
      <a-step>验证账号</a-step>
      <a-step>完成绑定</a-step>
    </a-steps>
    <a-form ref="formBindRef" :model="form">
      <a-form-item :label="accountLabel" field="value" :rules="{required: true}" validate-trigger="blur">
        <a-input :placeholder="accountLabel" v-model="form.value"></a-input>
      </a-form-item>
      <a-form-item v-if="form.step === 1" class="captcha_item" label="图形验证码">
        <a-input placeholder="验证码" v-model="form.captcha"></a-input>
        <f_captcha ref="captchaRef" :default-show="false" v-model="form.captchaID"></f_captcha>
      </a-form-item>
      <a-form-item v-if="form.step === 2" :label="accountCodeLabel">
        <a-input :placeholder="accountCodeLabel" v-model="form.code"></a-input>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button @click="cancel">取消</a-button>
      <a-button type="primary" @click="bindHandler(1)" v-if="form.step === 1">下一步</a-button>
      <a-button type="primary" @click="bindHandler(2)" v-if="form.step === 2">绑定</a-button>
    </template>
  </a-modal>
</template>

<style lang="less">
.bindAccountModalBody {
  .arco-form {
    margin-top: 20px;

    .captcha_item {
      .captcha_img {
        height: 30px;
        margin-left: 10px;
        border-radius: 5px;
        cursor: pointer;
      }
    }
  }
}
</style>